/* 菜单背景样式（就是调颜色的亮度来生成颜色） */

@mixin vir_menu($var0, $var1) {
    color: lighten($-vir-menu-item-color, $var0);
    background: lighten($-vir-menu-item-background, $var0);

    /* 单菜单 */
    &:hover {
        background: lighten(lighten($-vir-menu-item-background, $var0), $var1);
    }

    &.is-active {
        color: lighten($-vir-menu-item-active-color, $var0);
        background: lighten($-vir-menu-item-active-background, $var0);

        &:hover {
            background: lighten(lighten($-vir-menu-item-active-background, $var0), $var1);
        }
    }

    /* 折叠菜单 */
    &>.el-submenu__title {
        color: lighten($-vir-menu-item-color, $var0);
        background: lighten($-vir-menu-item-background, $var0);

        &:hover {
            background: lighten(lighten($-vir-menu-item-background, $var0), $var1);
        }
    }

    &.is-active>.el-submenu__title {
        color: lighten($-vir-menu-item-active-color, $var0);
        background: lighten($-vir-menu-item-background, $var0);

        &:hover {
            background: lighten(lighten($-vir-menu-item-background, $var0), $var1);
        }
    }

    &.is-opened>.el-submenu__title {
        color: lighten($-vir-menu-item-opened-color, $var0);
        background: lighten($-vir-menu-item-opened-background, $var0);

        &:hover {
            background: lighten(lighten($-vir-menu-item-opened-background, $var0), $var1);
        }
    }
}

.vir-menu {
    min-height: 100%;
    color: #f5f5f5;
    background: $-vir-menu-background;

    .vir-menu-item {
        height: $-vir-menu-item-height;
        line-height: $-vir-menu-item-line-height;

        &.el-submenu {
            height: auto;
        }

        &>.el-submenu__title {
            height: $-vir-menu-item-height;
            line-height: $-vir-menu-item-line-height;
        }

        /* 菜单图标、名称样式 */
        .vir-menu-title {
            display: flex;
            align-items: center;

            .vir-menu-icon {
                color: inherit;
                font-size: 16px;
                margin-right: 5px;
            }

            .vir-menu-name {
                flex: 1;
                color: inherit;
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        /* 不同层级的样式需要改变 */
        &.vir-menu-one {
            @include vir_menu(0, 5);
        }

        &.vir-menu-two {
            @include vir_menu(10, 5);
        }

        &.vir-menu-three {
            @include vir_menu(20, 5);
        }
    }
}